<template>
  <div class="container">
    <div class="top">
      <div class="left">
        <Bar
          :id="'leftBar'"
          :chart-data="chartData1"
          :color="'rgba(253, 180, 40, 1)'"
        ></Bar>
      </div>
      <div class="right">
        <Bar :id="'rightBar'" :chart-data="chartData2"> </Bar>
      </div>
    </div>
    <div class="bottom">
      <div class="box">
        <div class="topBar">
          <el-form
            ref="queryForm"
            :model="queryForm"
            :inline="true"
            class="search-form"
          >
            <el-form-item label="评价阶段" class="region">
              <el-select v-model="queryForm.key1" placeholder="请选择">
                <el-option
                  v-for="item in selectList"
                  :key="item.value"
                  :label="item.value"
                  :value="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="客户评价方案" class="region">
              <el-select v-model="queryForm.key2" placeholder="请选择">
                <el-option
                  v-for="item in selectList"
                  :key="item.value"
                  :label="item.value"
                  :value="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item style="text-align: right; width: 100%">
              <el-button type="primary" class="btn" @click="searchBtn(1)"
                >查询</el-button
              >
              <el-button type="primary" class="btn" @click="resetFn"
                >重置</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <div class="bottomInfo">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column type="index" label="序号" align="center">
            </el-table-column>
            <el-table-column
              prop="customerName"
              label="客户名称"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="rankingThisMonth"
              label="本月排名"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="rankingLastMonth"
              label="上月排名"
              align="center"
            >
            </el-table-column>
            <el-table-column prop="momChange" label="环比变动" align="center">
            </el-table-column>
            <el-table-column prop="totalScore" label="总分值" align="center">
            </el-table-column>
            <el-table-column
              prop="operation"
              label="操作"
              width="100px"
              align="center"
            >
              <template slot-scope="scope">
                <el-button
                  @click.native.prevent="changeRanking(scope.$index, scope.row)"
                  type="text"
                  size="small"
                >
                  更改排名
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            small
            background
            layout="prev, pager, next"
            :total="total"
            @current-change="pageFn"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Bar from "./components/bar.vue";

export default {
  name: "rankingChange",
  components: { Bar },
  data() {
    return {
      chartData1: {
        xAxisData: ["湖北银行", "广州银行", "苏州银行"],
        data: [
          {
            name: "名次上升",
            data: [5, 6, 7],
          },
        ],
      },
      chartData2: {
        xAxisData: ["湖北银行", "广州银行", "苏州银行"],
        data: [
          {
            name: "名次下降",
            data: [5, 6, 7],
          },
        ],
      },
      queryForm: {
        key1: "",
        key2: "",
      },
      selectList: [],
      tableData: [
        {
          customerName: "湖北银行",
          rankingThisMonth: "13",
          rankingLastMonth: "12",
          momChange: "1",
          totalScore: "87",
        },
        {
          customerName: "广州银行",
          rankingThisMonth: "12",
          rankingLastMonth: "13",
          momChange: "1",
          totalScore: "88",
        },
        {
          customerName: "苏州银行",
          rankingThisMonth: "7",
          rankingLastMonth: "6",
          momChange: "1",
          totalScore: "90",
        },
      ],
      total: 3,
    };
  },
  mounted() {},
  methods: {
    changeRanking(index, row) {},
    pageFn() {},
    resetFn() {},
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  color: #fff;
  .top {
    height: 300px;
    display: flex;
    .left,
    .right {
      flex: 1;
      background-color: #262d47;
    }
    .left {
      margin-right: 10px;
    }
  }
  .bottom {
    margin-top: 10px;
    flex: 1;
    background-color: #262d47;
  }
}

.box {
  display: flex;
  flex-direction: column;
  height: 100%;

  .topBar {
    background-color: #262d47;
    margin-bottom: 10px;
    padding: 20px 20px;
    padding-bottom: 10px;
  }

  .bottomInfo {
    flex: 1;
    width: 100%;
    background-color: #262d47;
    padding-bottom: 20px;
  }

  .el-pagination {
    text-align: right;
    margin-top: 10px;
  }

  .el-table {
    min-height: 440px;
  }

  .el-table ::v-deep th.el-table__cell {
    background-color: #1c2238 !important;
    color: #fff;
  }
}
</style>
